<template>
  <!-- 登陆页面中点击登陆或是注册部分 -->
  <div class="tab-control border-bottom">
    <div
      v-for="(title, index) in titles"
      :key="index"
      class="tab-control-item"
      :class="{ active: index === currentIndex }"
      @click="itemClick(index)"
    >
      <span>{{ title }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'slidingBlock',
  data () {
    return {
      titles: ['登陆', '注册'],
      currentIndex: 0
    }
  },
  methods: {
    /* 在data中定一个currentIndex 为 0，一开始就让第一个元素显示active类效果，
    点击然后把对应的index传过去，做一个判断如果index等于currentIndex的值就显示
    */
    itemClick (index) {
      this.currentIndex = index
      this.$emit("isLogin", index)
    }
  }
}
</script>

<style lang="less" scoped>
.tab-control {
  display: flex;
  text-align: center;
  margin: 0.64rem 0.255rem 0 0.255rem;
  .tab-control-item {
    flex: 1;
    color: #333;
    font-size: 0.18rem;
    margin-bottom: 0.04rem;
  }
  .active {
    color: #d20a0a;
    span {
      border-bottom: 0.03rem solid #d20a0a;
    }
  }
}
</style>
